<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getOrderInfo } from "@/api/mall";
import "plus-pro-components/es/components/descriptions/style/css";
import {
  PlusSearch,
  PlusDialogForm,
  PlusDescriptions,
  RecordType,
  type PlusColumn,
  type FieldValues
} from "plus-pro-components";
defineOptions({
  name: "MallOrderDetail"
});

const route = useRoute();
const orderId = Number(route.query.id);

const defaultSearchState = ref();
const descColumns: PlusColumn[] = [
  {
    label: "订单ID",
    width: 120,
    prop: "id",
    valueType: "copy"
  },
  {
    label: "订单号",
    width: 120,
    prop: "no",
    valueType: "copy"
  },
  {
    label: "用户ID",
    width: 120,
    prop: "member_id",
    valueType: "copy"
  },
  {
    label: "下单地址",
    width: 120,
    prop: "address",
    valueType: "text"
  },
  {
    label: "支付方式",
    width: 120,
    prop: "pay_type",
    formatter: row => {
      switch (row) {
        case 2:
          return "余额支付";
        case 3:
          return "积分支付";
        default:
          return "未知支付方式";
      }
    }
  },
  {
    label: "实际支付金额",
    width: 120,
    prop: "pay_amount"
  },
  {
    label: "购买数量",
    width: 120,
    prop: "goods_num",
    valueType: "text"
  },
  {
    label: "下单人",
    width: 120,
    prop: "user_name",
    valueType: "copy"
  },
  {
    label: "下单人电话",
    width: 120,
    prop: "user_phone",
    valueType: "copy"
  },
  {
    label: "订单备注",
    width: 120,
    prop: "remark",
    valueType: "text"
  },
  {
    label: "订单状态",
    width: 120,
    prop: "status",
    formatter: row => {
      switch (row) {
        case 1:
          return "待付款";
        case 2:
          return "待发货";
        case 3:
          return "待收货";
        case 4:
          return "已取消";
        case 5:
          return "已完成";
        case 7:
          return "申请退款";
        case 8:
          return "待填写地址";
        default:
          return "未知";
      }
    }
  },
  {
    label: "支付时间",
    width: 120,
    prop: "paid_at",
    valueType: "text"
  },
  {
    label: "商品名称",
    width: 120,
    prop: "goodsName",
    valueType: "text"
  },
  {
    label: "商品图片",
    width: 120,
    prop: "front_image"
  }
];
const info = ref<RecordType>({});

const loadOrderInfo = () => {
  getOrderInfo(orderId)
    .then(res => {
      const data = res.data;
      const goods = JSON.parse(data.goods_json);
      Object.assign(data, goods);
      info.value = data;
    })
    .catch(err => {
      console.log(
        "%c[ err ]-111",
        "font-size:13px; background:pink; color:#bf2c9f;",
        err
      );
    });
};
loadOrderInfo();
</script>

<template>
  <ElCard>
    <template #header>
      <ElPageHeader :icon="null">
        <template #title>
          <h3>订单详情</h3>
        </template>
      </ElPageHeader>
    </template>
    <PlusDescriptions :columns="descColumns" :column="2" :data="info">
      <template #plus-desc-pay_amount="{ row }">
        <span v-if="row.pay_type == 2">{{
          `${row.pay_amount * 0.01} 元余额`
        }}</span>
        <span v-else>{{ `${row.pay_amount} 积分` }}</span>
      </template>
      <template #plus-desc-front_image="{ row }">
        <el-image
          :src="row.front_image"
          alt="商品图片"
          style="width: 140px"
          :preview-src-list="[row.front_image]"
        />
      </template>
    </PlusDescriptions>
  </ElCard>
</template>

<style scoped></style>
